<style>
  .site-header-v2-fixed.is-open .mega-menu-dropdown {
    transition: none !important;
    opacity: 1;
  }
  .site-header-v2-fixed .is-focused .mega-menu-dropdown {
    transition: opacity .2s ease-in,max-height .2s ease-in !important;
    opacity: 1;
  }
</style>
{% assign show_bottom_border = false %}
{%- liquid
  assign custom_logo_width = section.settings.custom_logo_width | append: 'px'

  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign border_style = 'border-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign border_style = 'border-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign border_style = 'border-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_bottom_border = true
    when 'black'
      assign background_color = 'bg-black'
      assign border_style = 'border-black'
  endcase
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-inverse'
    else
      assign text_color = ''
  endcase
  assign is_desktop_logo_top_left = false
  if section.settings.show_full_width_header == false
    case section.settings.desktop_logo_position
      when 'top_center'
        assign pc_ul_wrapper = 'flex-lg-wrap'
        assign pc_li_logo_wrapper = 'col-lg-4'
        assign pc_li_tab_wrapper = 'order-lg-2'
        assign pc_li_tab_position = 'justify-content-lg-center px-lg-3'
        assign pc_li_user_cart_icon_wrapper = 'col-lg-4'
        assign pc_li_user_cart_icon_position = 'justify-content-lg-end'
        assign nav_menu_padding_top = 'nav-menu-padding-top'
      when 'top_left'
        assign pc_ul_wrapper = 'flex-lg-wrap'
        assign pc_li_logo_wrapper = 'col-lg-4 justify-content-lg-start'
        assign pc_li_tab_wrapper = 'order-lg-2'
        assign pc_li_tab_position = 'justify-content-lg-start px-lg-0'
        assign pc_li_user_cart_icon_wrapper = 'col-lg-4 offset-lg-4'
        assign pc_li_user_cart_icon_position = 'justify-content-lg-end'
        assign nav_menu_padding_top = 'nav-menu-padding-top'
        assign is_desktop_logo_top_left = true
    endcase
  endif
  case section.settings.mobile_layout
    when 'logo_center'
      assign mb_li_user_cart_icon_wrapper = 'position-absolute'
      assign mb_li_tab_wrapper = 'position-absolute'
    when 'tab_first'
      assign mb_li_logo_wrapper = 'ms-3'
      assign mb_li_user_cart_icon_wrapper = 'flex-grow-1'
      assign mb_li_ul_position = 'justify-content-end'
    when 'logo_first'
      assign mb_li_user_cart_icon_wrapper = 'flex-grow-1'
      assign mb_li_tab_wrapper = 'order-2 ms-3'
      assign mb_li_ul_position = 'justify-content-end'
  endcase
  case section.settings.hover_style
    when 'highlight'
      assign hover_style = 'nav-link-highlight'
    when 'outline'
      assign hover_style = 'nav-link-outline'
    when 'text_outline'
      assign hover_style = 'nav-link-text-outline'
  endcase
  case section.settings.sticky_header
    when 'allow_sticky'
      assign sticky_number = 1
    when 'never_sticky'
      assign sticky_number = 2
    when 'scroll_sticky'
      assign sticky_number = 0
  endcase

  assign flag = false
  if section.settings.desktop_logo_position != 'middle_left' and section.settings.show_full_width_header == false
    assign logo_margin = 'm-lg-0'
    if section.settings.desktop_logo_position == 'top_left'
      assign flag = true
    endif
  elsif section.settings.show_full_width_header == true
    assign logo_margin = 'm-lg-0'
  endif

  if section.settings.show_separator_line == true
    assign show_box_shaw = 'site-header-box-shadow'
  endif

-%}

{%- if settings.show_cart -%}
  {%- liquid
    assign show_mini_cart = false
    assign show_drawer_cart = false
    case settings.cart_type
      when 'drawer'
        assign show_mini_cart = false
        if request.page_type != 'cart'
          assign show_drawer_cart = true
        endif
      when 'mini_cart'
        assign show_drawer_cart = false
        if request.page_type != 'cart'
          assign show_mini_cart = true
        endif
      when 'page'
        assign show_drawer_cart = false
        assign show_mini_cart = false
    endcase
    if show_mini_cart or show_drawer_cart
      assign cart_dropdown_style = 'as-cart-dropdown as-dropdown dropdown cursor-pointer'
    endif
  -%}
{% endif %}

<div class="header-v2 header-v2-fixed position-absolute w-100 {% if section.settings.show_full_width_header == true %}header-full-width{% endif %}">

  <div class="dropdown-backdrop fade as-dropdown-backdrop"></div>
  <nav class="as-site-header site-header-v2-fixed as-header-v2-fixed navbar py-0 align-items-lg-center align-items-start {% unless show_bottom_border %} {{ border_style }} {% endunless %} {{ show_box_shaw }}" data-expand='true'>
    <div class="site-header-container {% if section.settings.show_full_width_header == true %}container-topic{% else %}container{% endif %} d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between">

      <ul class="list-unstyled flex-center d-lg-none w-100 mb-0 position-relative nav-height">
        <li class="nav-expand as-expand flex-center {{ mb_li_tab_wrapper }}">
          <button class="as-navbar-toggler navbar-toggler order-last border-0 px-0 collapsed"
            type="button" data-bs-toggle="collapse" aria-label="Navbar toggler">
            <div class="hamburger-box-wrapper">
              <span class="hamburger-box"></span>
              <span class="hamburger-box"></span>
              <span class="hamburger-box"></span>
            </div>
          </button>
        </li>
        <li class="flex-center logo nav-menu-item {{ mb_li_logo_wrapper }}">
          <a class="d-flex flex-column align-items-center text-decoration-none text-decoration-none" href="{{ routes.root_url }}">
            <span class="flex-center mb-0">{% render 'icon-logo' %}</span>
          </a>
        </li>
        <li class="nav-menu-item  end-0 {{ mb_li_user_cart_icon_wrapper }}">
          <ul class="list-unstyled mb-0 nav-icon {{ mb_li_ul_position }}">
            {%- if settings.show_search and section.settings.mobile_layout != 'logo_center' -%}
              <div class="me-3">
                <a class="header-icon cursor-pointer nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                  {%- render 'icon-search' -%}
                </a>
              </div>
            {%- endif -%}

            {%- if settings.show_cart -%}
              <li class="me-3">
                <cart-icon-bubble>
                  <a class="position-relative icon-btn lh-1 icon-wrapper flex-center lead nav-fw nav-link"
                  {% if show_drawer_cart == false %}href="{{ routes.cart_url }}" {%endif%}
                    id="as-cart-icon-bubble"
                    data-id="cart-icon-bubble"
                    {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}>
                    {% render 'cart-icon-bubble' %}
                  </a>
                </cart-icon-bubble>
              </li>
            {%- endif -%}
            {% if shop.customer_accounts_enabled %}
              {% if customer %}
                <li>
                  <a class="icon-btn icon-wrapper flex-center lead lh-1 nav-link" href="{{ routes.account_url }}">
                    <span class="icon-wrap-md">
                      {% render 'icon-user' %}
                    </span>
                  </a>
                </li>
              {% else %}
                <li>
                  <a class="icon-btn icon-wrapper flex-center lead lh-1 nav-link" href="{{ routes.account_login_url }}">
                    <span class="icon-wrap-md">
                      {% render 'icon-user' %}
                    </span>
                  </a>
                </li>
              {% endif %}
            {% endif %}
          </ul>
        </li>
      </ul>

      <ul class="list-unstyled w-100 mb-0 nav-menu {{ nav_menu_padding_top }} flex-column flex-lg-row d-flex align-items-lg-center {{ show_box_shaw }}{% if section.settings.show_full_width_header == true %} justify-content-lg-between nav-menu-pading{% endif %} {{ pc_ul_wrapper }}">

        {%- if section.settings.desktop_logo_position == 'top_center' and section.settings.show_full_width_header == false -%}
          {%- if settings.show_search -%}
            <div class="d-none d-lg-block col-lg-4">
              <a class="cursor-pointer header-icon px-0 nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                {%- render 'icon-search' -%}
              </a>
            </div>
          {%- endif -%}
        {%- endif -%}

        <li class="flex-center d-none d-lg-flex nav-menu-item {{ pc_li_logo_wrapper }}">

          <a class="logo d-flex flex-column align-items-center text-decoration-none {{ logo_margin }}" href="{{ routes.root_url }}">
            <span class="flex-center mb-0">{% render 'icon-logo' %}</span>
          </a>
        </li>

        <li class="flex-grow-0{% if section.settings.show_full_width_header == false %} flex-lg-grow-1{% endif %} {{ pc_li_tab_wrapper }}">
          {%- comment -%} 移动端 mobile_layout为 logo_center时的搜索 {%- endcomment -%}
          {%- if settings.show_search and section.settings.mobile_layout == 'logo_center' -%}
            <div class="cursor-pointer search-form-content search-modal-trigger d-lg-none" data-bs-toggle="modal" data-bs-target="#searchModal">
              <form class="search-form ">
                <div class="d-flex justify-content-center flex-wrap w-100">
                  <div class="input-text">
                    <span class="search-icon active nav-link">
                      {% render 'icon-search' %}
                    </span>
                    <input
                      type="text"
                      autocomplete="off"
                      value=""
                      class="form-control cursor-pointer"
                      placeholder="{{ 'sections.custom_search.placeholder' | t }}"
                      aria-label="{{ 'sections.custom_search.placeholder' | t }}"
                      disabled
                      >
                  </div>
                </div>
              </form>
            </div>
          {%- endif -%}

          <ul class="d-flex flex-column flex-lg-row list-unstyled w-100 px-0 as-nav-link-container nav-link-container {{ pc_li_tab_position }}">
            {%- for link in linklists[section.settings.main_menu].links -%}
              {% comment %}一级导航栏内没二级{% endcomment %}
              {% if link.levels == 0 %}
                <li class="nav-item nav-link-wrap{% if forloop.first == true and flag %} ps-lg-0{% endif %}">
                  <a {% render 'link', link: link.url %} class="nav-link {{ hover_style }} d-flex small nav-fw" href="{{ link.url }}">
                    <span class="position-relative text-outline">{{ link.title }}</span>
                  </a>
                </li>
              {% comment %}一级导航栏内有二级{% endcomment %}
              {% elsif link.levels >= 1 %}
                {% comment %}判断配置的图片链接是否有跟三级菜单链接相同的{% endcomment %}
                {% liquid
                  assign secondmenu_links = link.links | map: "url"
                  assign thirdmenu_links = link.links | map: "links" | map: "url"
                  assign block_settings = section.blocks | where: "type", "mega_menu" | map: "settings"
                  assign block_links = section.blocks | where: "type", "mega_menu" | map: "settings" | map: 'link'
                  assign has_matched_secondmenu_link = false
                  assign has_matched_thirdmenu_link = false
                  assign has_matched_img = false
                  assign has_matched_block = 'ddd'
                  for secondmenu_link in secondmenu_links
                    for block_setting in block_settings
                      if secondmenu_link == block_setting.link
                        assign has_matched_secondmenu_link = true
                        assign has_matched_block = block_setting.img
                        if has_matched_block != blank
                          assign has_matched_img = true
                        endif
                        break
                      endif
                    endfor
                  endfor

                  for thirdmenu_link in thirdmenu_links
                    for block_setting in block_settings
                      if thirdmenu_link == block_setting.link
                        assign has_matched_thirdmenu_link = true
                        assign has_matched_block = block_setting.img
                        if has_matched_block != blank
                          assign has_matched_img = true
                        endif
                        break
                      endif
                    endfor
                  endfor
                %}
                {% assign has_mega_menu = true %}
                {% if has_matched_secondmenu_link and link.levels < 2 and has_matched_img %}
                  {% assign has_mega_menu = false %}
                {% elsif has_matched_secondmenu_link == false and has_matched_thirdmenu_link and has_matched_img %}
                  {% assign has_mega_menu = false %}
                {% else %}
                  {% assign has_mega_menu = true %}
                {% endif %}
                {% comment %}一级导航栏{% endcomment %}
                <li data-mega-menu="{{ has_matched_img }}" data-secondmenu_link="{{ has_matched_secondmenu_link }}" data-thirdmenu_link="{{ has_matched_thirdmenu_link }}" class="nav-item as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center{% if forloop.first == true and flag %} ps-lg-0{% endif %}{% if has_mega_menu %} position-relative{% endif %}" tabindex="0">
                  <a id="dropdownMenuLink{{ forloop.index }}"
                    class="nav-link cursor-pointer {{ hover_style }} dropdown-toggle small nav-fw as-nav-link" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <span class="text-outline">{{ link.title }}</span>
                    <span class="dropdown-icon">{% render 'icon-chevron-down' %}</span>
                  </a>

                  {% render 'header-dropdown-menu-v2', link: link, background_color: background_color, if_first: forloop.first, is_desktop_logo_top_left: is_desktop_logo_top_left, desktop_columns_per_row: section.settings.desktop_columns_per_row, menu_background: section.settings.menu_background, has_matched_secondmenu_link: has_matched_secondmenu_link, has_matched_thirdmenu_link: has_matched_thirdmenu_link, has_matched_img: has_matched_img %}

                </li>
              {% endif %}
            {%- endfor -%}
          </ul>
        </li>


        <li class="d-none d-lg-block position-relative nav-menu-item {{ pc_li_user_cart_icon_wrapper }}">
          <ul class="list-unstyled d-flex align-items-center mb-0 h-100 flex-column flex-lg-row px-3 px-lg-0 nav-icon me-n2 {{ pc_li_user_cart_icon_position }}">

            {%- if settings.show_search -%}
              {% unless section.settings.desktop_logo_position == 'top_center' and section.settings.show_full_width_header == false %}
                <div class="nav-item me-2">
                  <a class="header-icon cursor-pointer nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                    {%- render 'icon-search' -%}
                  </a>
                </div>
              {% endunless %}
            {%- endif -%}

            {%- if settings.show_cart -%}
              <li class="nav-item me-2 me-md-3 {{ cart_dropdown_style }}">
                <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                  <a {% if show_drawer_cart == false %}href="{{ routes.cart_url }}"{% endif %}
                    {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}
                    class="dropdown-toggle icon-btn lh-1 nav-link {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %}"
                    id="as-cart-icon-bubble-web"
                    data-id="cart-icon-bubble">
                    {% render 'cart-icon-bubble' %}
                  </a>
                </cart-icon-bubble>
                {% if show_mini_cart %}
                  <mini-cart
                    id="mini-cart-items"
                    class="mini-cart-container dropdown-menu position-absolute end-0 overflow-hidden bg-default py-0 lh-base text-wrap"
                    data-id="mini-cart">
                    {% render 'mini-cart' %}
                  </mini-cart>
                {% endif %}
              </li>
            {%- endif -%}
            {% if shop.customer_accounts_enabled %}
              {% if customer %}
                <li class="nav-item cursor-pointer as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center{% if section.settings.show_full_width_header == true %} pe-lg-0{% endif %}" tabindex="0">
                  <div class="position-relative h-100 flex-center icon-wrapper lead" >
                    <a class="d-flex nav-link {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %} dropdown-toggle small icon-btn" data-bs-toggle="dropdown"
                      aria-expanded="false">
                      <span class="icon-wrap-md d-inline-block">{% render 'icon-user' %}</span>
                      {% if customer.name %}
                        <span class="ms-1">{{ customer.name | truncate: 12 }}</span>
                      {% endif %}
                    </a>
                    <div class="as-dropdown-menu rounded-top-left-0 rounded-top-right-0 rounded-2 px-3 px-lg-2 py-0 dropdown-menu overflow-hidden dropdown-menu-center user-dropdown text-start {{ background_color }}" >
                      <div class="pb-lg-2 pt-lg-2">
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_url }}">{{ 'customer.account.my_orders' | t }}</a>
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_addresses_url }}">{{ 'customer.account.my_addresses' | t }}</a>
                        <hr class="my-2">
                        <a class="dropdown-item px-lg-4" href="{{ routes.account_logout_url }}">{{ 'customer.customer.log_out' | t }}</a>
                    </div>
                    </div>
                  </div>
                </li>
              {% else %}
                <li class="nav-item d-none d-lg-block{% if section.settings.show_full_width_header == true %} pe-lg-0{% endif %}">
                  <div class="p-0 flex-center lead icon-wrapper">
                    <a href="{{ routes.account_login_url }}" class="nav-link icon-btn {% if section.settings.desktop_logo_position == 'middle_left' or section.settings.show_full_width_header == true %}{{ hover_style }}{% endif %} lh-1 icon-wrap-md"><span class="d-inline-block">{% render 'icon-user' %}</span></a>
                  </div>
                </li>
              {% endif %}
            {% endif %}
          </ul>
        </li>
      </ul>

      {%- if settings.show_search -%}
        <details-modal>
          <div class="search-modal-overlay as-modal-overlay d-none d-lg-block"></div>
            {% render 'search-modal', background_color: background_color, text_color: text_color %}
        </details-modal>
      {%- endif -%}
    </div>
  </nav>
</div>

{%- if settings.show_cart -%}
  {%- if settings.add_to_cart_action == 'show_added_msg' and show_mini_cart -%}
    <div class="cart-notification-container container">
      {% render 'cart-notification', class: 'd-none d-md-block' %}
    </div>
  {%- endif -%}
{%- endif -%}

{% schema %}
  {
    "name": "Header Fixed",
    "tag": "header",
    "class": "shopify-section-header as-shopify-header fixed-top fixed-zindex position-fixed",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "label": "Logo image",
        "type": "image_picker",
        "id": "logo"
      },
      {
        "type": "range",
        "id": "custom_logo_width",
        "min": 50,
        "max": 250,
        "step": 10,
        "default": 70,
        "unit": "px",
        "label": "Custom logo width"
      },
      {
        "type": "link_list",
        "label": "Main menu",
        "id": "main_menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "desktop_logo_position",
        "label": "Desktop logo position",
        "options": [
          {
            "value": "middle_left",
            "label": "Middle left"
          },
          {
            "value": "top_left",
            "label": "Top left"
          },
          {
            "value": "top_center",
            "label": "Top center"
          }
        ],
        "default": "middle_left"
      },
      {
        "type": "checkbox",
        "id": "show_full_width_header",
        "label": "Show full width header on Desktop",
        "default": false,
        "info": "Logo is fixed on the left side."
      },
      {
        "type": "select",
        "id": "mobile_layout",
        "label": "Mobile layout",
        "options": [
          {
            "value": "logo_center",
            "label": "Logo on center"
          },
          {
            "value": "tab_first",
            "label": "Tab first"
          },
          {
            "value": "logo_first",
            "label": "Logo first"
          }
        ],
        "default": "logo_center"
      },
      {
        "type": "select",
        "id": "hover_style",
        "label": "Hover style",
        "options": [
          {
            "value": "highlight",
            "label": "Highlight"
          },
          {
            "value": "outline",
            "label": "Outline"
          },
          {
            "value": "text_outline",
            "label": "Text outline"
          }
        ],
        "default": "highlight"
      },
      {
        "type": "checkbox",
        "id": "show_separator_line",
        "label": "Show separator line",
        "default": false
      },
      {
        "type": "select",
        "id": "sticky_header",
        "label": "Sticky header",
        "options": [
          {
            "value": "allow_sticky",
            "label": "Always sticky"
          },
          {
            "value": "scroll_sticky",
            "label": "When customers scroll up"
          },
          {
            "value": "never_sticky",
            "label": "Never"
          }
        ],
        "default": "never_sticky"
      },
      {
        "type": "checkbox",
        "id": "adapt_to_image_size",
        "label": "Adapt to Image Size",
        "default": false,
        "info": "It works on images in mega menu"
      },
      {
        "type": "color",
        "id": "menu_background",
        "label": "Menu Block Background",
        "default": "#f8f9fa"
      },
      {
        "type": "radio",
        "id": "desktop_columns_per_row",
        "label": "Desktop columns per row",
        "options": [
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          }
        ],
        "default": "5"
      }
    ],
    "blocks": [
      {
        "type": "mega_menu",
        "name": "Mega menu",
        "settings": [
          {
            "type": "paragraph",
            "content": "Add an image for the specified navigation"
          },
          {
            "type": "image_picker",
            "id": "img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Fill in the URL which need add an image.Please make sure that the link you already exists in the selected navigation, otherwise this block will not be shown."
          },
          {
            "type": "text",
            "id": "text",
            "label": "text"
          }
        ]
      }
    ]
  }
{% endschema %}
